<template>
    <div class="page-staff-manage">
        <!-- 商家职员 -->
        <ManageHeader v-if="userBasicInfo" :info="userBasicInfo" bg-color="red"/>
        <div class="main">
            <div class="search-box">
                <div class="title text-large text-center">订单管理</div>
                <div class="search">
                    <SearchBar v-model="name" placeholder="搜索购买者" @search="getOrderList()" />
                </div>
            </div>
            <div class="order-wrap" v-if="orderList.length">
                <OrderCard
                    v-for="(orderId, index) in orderList"
                    @resetOrderList="resetOrderList"
                    @showType="showType"
                    :key="index"
                    label-color="red"
                    :order="orderMap[orderId]"
                    :detail="orderMap[orderId].detail"
                    :gift="orderMap[orderId].gift"
                    :order-key="orderKey"
                    :is-prepay="orderMap[orderId].is_prepay"
                    :final="orderMap[orderId].final_payment"
                    :delivery="orderMap[orderId].delivery"
                    :buyer-confirm="orderMap[orderId].buyer_confirm"
                    :order-id="orderMap[orderId].id"
                    :link-id="orderMap[orderId].link_id"
                    :has-btn="true"
                    :cover="orderMap[orderId].cover"
                    :title="orderMap[orderId].title"
                    :nickname="orderMap[orderId].name ? orderMap[orderId].name : orderMap[orderId].nickname"
                    :price="orderMap[orderId].price"
                    :original-price="orderMap[orderId].original_price"
                    :coupon-pay="orderMap[orderId].coupon_pay"
                    :createdAt="orderMap[orderId].created_at"
                    :referrer="orderMap[orderId].referrer_name ? orderMap[orderId].referrer_name : orderMap[orderId].referrer_nickname"
                    :referrer-type="orderMap[orderId].referrerType"
                    :referrer-level="orderMap[orderId].referrer_level"
                    :is-finish="orderMap[orderId].is_finish"
                    :order-status="orderMap[orderId].status"
                    :order-type="orderMap[orderId].type"
                    :mobile="orderMap[orderId].mobile"
                    :buyer-remark="orderMap[orderId].buyer_remark"
                    :address="orderMap[orderId].address" />
            </div>
            <ListEmpty v-else />
        </div>
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';

import ManageHeader from '@/features/manage/header.vue';
import OrderCard from '@/features/manage/orderCard.vue';
import PeopleSelect from '@/features/manage/peopleSelect.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import SearchBar from '@/module/manage/components/searchBar.vue';
import {
    getOrderKey,
} from '@/lib/utils';
import store from '@/store';

import { Component, Vue, Watch } from 'vue-property-decorator';

@Component({
    name: 'StaffManage',
    components: {
        ManageHeader,
        OrderCard,
        PeopleSelect,
        ListEmpty,
        SearchBar,
    },
})
export default class StaffManage extends Vue {
    public name: string = '';

    public async showType(_data){
        const res = await store.dispatch('order/getManageOrderDetail', {
            orderId: _data.orderId,
        });
        if (res.statusCode !== 200 || res.data.status !== 0) {
            wx.showToast({
                title: '订单不存在',
                icon: 'none',
            });

        }else{
            if(res.data.data == null){
                wx.showToast({
                    title: '订单不存在',
                    icon: 'none',
                });
            }else{
                api.push({
                    name: ROUTE_NAME.ORDER_MANAGE_ORDER_DETAIL,
                    params: {
                        orderId: _data.orderId+ '',
                    }
                })
            }
        }
    }

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get orderListMap() {
        return store.state.manage.orderListMap;
    }
    public get orderMap() {
        return store.state.manage.orderMap;
    }
    public get orderKey() {
        return this.name ? getOrderKey({
            name: this.name,
            level: 3,
        }) : getOrderKey({ level: 3 });
    }
    public get orderList() {
        return this.orderListMap[this.orderKey] ? this.orderListMap[this.orderKey].list : [];
    }

    @Watch('orderKey')
    public onOrderKeyChange(val: any) {
        // console.log('page key', val);
    }

    public async resetOrderList() {
        this.getOrderList(true);
    }

    public async getOrderList(forceUpdate = false) {
        const params = {
            offset: this.orderList.length,
            count: 10,
            level: 3,
        };
        if (this.name) {
            Object.assign(params, {
                name: this.name,
            });
        }
        if (forceUpdate) {
            Object.assign(params, {
                offset: 0,
                forceUpdate,
            });
        }
        await store.dispatch('manage/getOrderList', params);
    }
    public async onReachBottom() {
        await this.getOrderList();
        store.commit('utils/endPulldown');
    }

    // 下拉刷新
    async onPullDownRefresh() {
        store.commit('utils/startPulldown');
        const params = {
            offset: 0,
            count: 10,
            level: 3,
            forceUpdate: true
        };
        await store.dispatch('manage/getOrderList', params);
        store.commit('utils/endPulldown');
    }

    public async created() {
        this.resetOrderList();

        window.addEventListener('wxshow', () => {
            this.getOrderList(true);
        });
        window.addEventListener('reachbottom', this.onReachBottom);
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
    }

    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-staff-manage {
    min-height: 100%;
    background-color: #f8f8f8;

    .main {
        background-color: #f8f8f8;
        .search-box {
            .title {
                padding-top: 12px;
            }
        }
        .order-wrap {
            padding: 0 12rpx;
        }
    }
}

</style>
